<template>
	<view>
		<view class="content" v-if="indexOrDetial">
			<view class="staff-cont">
				<view class="title-box">
					预约时间
				</view>
				<view class="staff_box form-box member_box">
					<view class="right-box">
						<view class="right-item" :class="timeId == item.time_id?'activite':''" @click="clickTime(item)"
							v-for="(item,index) in timeData" :key="index">{{item.timeStr}}
						</view>
					</view>
				</view>


				<view class="title-box">
					预约场地
				</view>

				<view class=" staff_box form-box palce_box">

					<view class="right-box">
						<view class="right-item" @click="clickPlace(item)" :class="item.placeClass"
							v-for="(item,index) in placeData" :key="index">{{item.name}}</view>
					</view>
				</view>

				<view class="title-box">
					添加预约
				</view>

				<view class="staff_box form-box">
					<view class="order-box">
						<view class="right-box2">

							<uni-forms ref="form" :modelValue="userFormData" label-width="100">
								<uni-forms-item label="姓名">
									<uni-easyinput type="text" v-model="userFormData.name" placeholder="请输入姓名" />
								</uni-forms-item>
								<uni-forms-item label="手机号">
									<uni-easyinput type="text" v-model="userFormData.phone" placeholder="请输入手机号" />
								</uni-forms-item>
								<uni-forms-item>
									<view class="btn-box">
										<button size="mini" plain="true" @click="addMember('form')">
											新增
										</button>
									</view>
								</uni-forms-item>
							</uni-forms>


						</view>
					</view>
				</view>

				<view class="title-box2" v-if="list.length > 0">
					预约信息
				</view>
				<uni-card v-for="(item,index) in list" :key="index" :index="index">
					<uni-list :border="false">
						<uni-list-item :border="false" title="姓名" :rightText="item.name"></uni-list-item>
						<uni-list-item :border="false" title="手机号" :rightText="item.phone"></uni-list-item>
					</uni-list>

				</uni-card>



			</view>

			<view class="btn-group">
				<view class="btn-item">
					<button class="cancel-btn" @click="cancelData">取消预约</button>
				</view>
				<view class="btn-item">
					<button class="submimt-btn" @click="submitData">提交预约</button>
				</view>
				<view class="btn-item">
					<button class="check-btn" @click="check">查看预约</button>
				</view>



			</view>
		</view>

		<view class="detail " v-else>
			<view class="detail-top">
				<view class="info">预约详情</view>
				<uni-icons type="closeempty" size="26" @click="close"></uni-icons>
			</view>
			<uni-card v-for="(item,index) in detailList" :key="index" :index="index">
				<uni-list :border="false">
					<uni-list-item :border="false" title="预约人姓名" :rightText="item.name"></uni-list-item>
					<uni-list-item :border="false" title="预约场地" :rightText="item.place_id + '号场地'"></uni-list-item>
					<uni-list-item :border="false" title="预约时间" :rightText="item.descri"></uni-list-item>
					<view class="line-box"></view>
					<uni-list-item :border="false" title="同行人姓名" :rightText="item2.name"  v-for="(item2,index2) in item.retinue_js" :key="index2" :index="index2"></uni-list-item>
				</uni-list>

			</uni-card>


		</view>
	</view>

</template>

<script>
	import {
		confirm,
		cancel,
		get_order
	} from '@/api/api';


	import utils from "@/utils/utils";

	let phoneReg = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/;

	export default {
		data() {
			return {
				indexOrDetial: true,
				name: "",
				cardno: "",
				type: "",
				timeId: 1,
				timeData: [{
						timeStr: "周二的18:00-20:00",
						time_id: 1,
					},
					{
						timeStr: "周二的20:00-22:00",
						time_id: 2,
					},
					{
						timeStr: "周六的16:00-18:00",
						time_id: 3,
					},
					{
						timeStr: "周六的18:00-20:00",
						time_id: 4,
					},
					{
						timeStr: "周六的20:00-22:00",
						time_id: 5,
					},
				],
				placeData: [{
						name: "场地1",
						place_id: 1,
						placeClass: "active-place"
					},
					{
						name: "场地2",
						place_id: 2,
						placeClass: ""
					},
					{
						name: "场地3",
						place_id: 3,
						placeClass: ""
					},
					{
						name: "场地4",
						place_id: 4,
						placeClass: ""
					},
				],
				placeId: 1,
				userFormData: {
					name: "",
					phone: ""
				},
				list: [],
				detailList: []

			}
		},
		onShow() {
			//隐藏返回首页按钮，左上角home图标
			uni.hideHomeButton();
		},
		onLoad(option) {
			console.log("option", option)
			if (option) {
				this.cardno = option.cardno;
				this.type = option.type;
				this.name = option.name;


			}

		},
		methods: {
			close() {
				this.indexOrDetial = true;
			},
			check() {

				this.getDetailList();
				this.indexOrDetial = false;
			},
			getDetailList() {
				let params = { // 卡号
					vip_or_employee: this.cardno,
				}
				get_order(params).then((res) => {
					console.log("res", res)
					if (res.msg == "success") {
						this.detailList = res.data || [];
					}
				});
			},
			placeDataComputed() {
				let list = [...this.placeData];
				list.map(item => {
					if (this.timeId == 3 && (item.place_id == 2 || item.place_id == 3)) {
						item.placeClass = "place-disabled";
					} else {
						if (this.placeId == item.place_id) {
							item.placeClass = "active-place";
						} else {
							item.placeClass = "";
						}
					}

				})

				this.placeData = list;


			},
			checkData() {
				console.log("checkData---start")
				if (this.userFormData.name == "") {
					console.log("checkData---name--", this.userFormData.name == "")
					utils.showMessage("姓名不能为空！");
					return false
				}


				if (this.userFormData.phone == "") {
					utils.showMessage("联系方式不能为空！");
					return false
				}


				if (!phoneReg.test(this.userFormData.phone)) {
					utils.showMessage("请输入正确的11位手机号！");
					return false
				}

				if (this.placeId == "") {
					utils.showMessage("请选择其他时间段或场地！");
					return false
				}

				return true;

			},
			clickTime(item) {

				if (this.list.length > 0) {
					utils.showMessage("提交预约,请选择同一时间，同一场地！");
				} else if (this.list.length == 0) {
					this.timeId = item.time_id;
					this.placeDataComputed();
				}





			},
			clickPlace(item) {

				if (item.placeClass == "place-disabled") {
					utils.showMessage("请选择其他时间段或场地！");

					this.placeId = "";

				} else {

					if (this.list.length > 0) {
						utils.showMessage("提交预约,请选择同一时间，同一场地！");
					} else if (this.list.length == 0) {
						this.placeId = item.place_id;
						this.placeDataComputed();
						this.userFormData.name = "";
						this.userFormData.phone = "";
					}

				}
			},
			addMember() {
				let flag = this.checkData();
				if (!flag) {
					return;
				}
				if (this.list.length < 2) {
					const obj = {}
					let row = this.userFormData
					Object.keys(this.userFormData).forEach((key) => {
						obj[key] = row[key]
					})


					this.list.unshift(obj)

					this.userFormData.name = "";
					this.userFormData.phone = "";
				} else {
					utils.showMessage("最多可预约2人！");
					this.userFormData.name = "";
					this.userFormData.phone = "";
				}


			},
			submitData() {

				let params = {
					name: this.name,
					// 0 员工  1会员
					type: Number(this.type),
					// 卡号
					vip_or_employee: this.cardno,
					place_id: this.placeId,
					time_id: this.timeId,
					retinue_js: this.list
				}

				confirm(JSON.stringify(params)).then((res) => {
					console.log("res", res)
					this.list = [];

					if (res.msg == "success") {
						utils.showMessage("预约成功！");
					}
				});

			},
			cancelData() {
				let params = {
					name: this.name,
					// 卡号
					vip_or_employee: this.cardno,
				}

				utils.showModal({
					title: "取消预约",
					content: "是否取消预约?",
					cancelText: "否",
					confirmText: "是",
					success: async function(res1) {
						if (res1.confirm) {
							cancel(JSON.stringify(params)).then((res) => {
								console.log("res", res)

								this.list = [];
								if (res.msg == "success") {
									utils.showMessage("取消成功！");
								}
							})

						} else if (res1.cancel) {
							console.log("用户点击取消");
						}
					},
				});

			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		position: relative;
	}

	.detail {
		background: rgb(237, 237, 237);
		padding-bottom: 40rpx;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.detail-top {
		display: flex;
		justify-content: space-between;
		padding-right: 30rpx;
	}

	.line-box {
		height: 1px;
		transform: scaleY(0.5);
		background-color: #c8c7cc;
	}

	.staff-cont {
		background: rgb(237, 237, 237);
		min-height: 100vh;
		padding-bottom: 60px;
		box-sizing: border-box;
	}

	.right-item {
		display: flex;
		line-height: 88upx;
		height: 88upx;

		.item-left {
			width: 100px;
		}

	}

	.form-box {
		padding-left: 30upx;
		padding-right: 30upx;
		max-width: 750upx;
		width: 100%;
		box-sizing: border-box;
		font-size: 14px;
		color: #333;
	}

	.title-box,
	.detail-top {
		line-height: 80upx;
		height: 80upx;
		font-size: 14px;
		padding-left: 40upx;
		box-sizing: border-box;
	}

	.title-box2 {
		height: 60upx;
		font-size: 14px;
		padding-left: 40upx;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
	}

	.btn-box {

		button {
			margin-top: 10px;
			background-color: #fff;
			border-color: #3da8f5;
			color: #3da8f5;
		}
	}

	.order-box {
		background: #fff;
		border-radius: 5px;
		padding: 24rpx;
	}



	.place-disabled {
		color: #ccc;
	}


	.form-row2 {
		margin: 20upx;

	}


	.member_box,
	.palce_box {
		margin-bottom: 30upx;
		display: flex;
	}

	.left-box {
		display: flex;
	}


	.right-box {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
	}

	.member_box .right-box .right-item {
		width: 50%;
		box-sizing: border-box;
		padding: 20upx;
		border: 1upx solid #ccc;
		background: #fff;
		height: 126rpx;
		justify-content: center;
		align-items: center;

	}

	.palce_box .right-box .right-item {
		flex: 1;
		width: 50%;
		border: 1upx solid #ccc;
		padding: 20upx;
		background: #fff;
	}

	.order_box .left-box {
		display: flex;
	}

	.order-box .right-item {
		border-bottom: 1upx dashed #ccc;
	}



	.activite {
		// background: #04c9c3;
		border-color: #3da8f5 !important;
		color: #3da8f5 !important;
	}

	.active-place {
		// background: #04c9c3;
		border-color: #3da8f5 !important;
		;
		color: #3da8f5 !important;
	}

	.place-disabled {
		color: #ccc;
	}

	.icon-plus {
		width: 120upx;
		height: 40upx;
		line-height: 40upx;
		border: 1px solid #F17F42;
		border-radius: 50%;
		text-align: center;
		color: #F17F42;
		margin-left: 20upx;
	}

	.btn-group {
		display: flex;
		width: 100%;
		height: 100rpx;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		border-top: 1px solid #ebebeb;

		.btn-item {
			flex: 1;
			padding: 15rpx;
		}

		.cancel-btn {
			background-color: #f56c6c;
			color: #fff;
			font-size: 15px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.submimt-btn {
			background-color: #3da8f5;
			color: #fff;
			font-size: 15px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.check-btn {
			background-color: #67C23A;
			color: #fff;
			font-size: 15px;
			display: flex;
			justify-content: center;
			align-items: center;

		}

	}
</style>
